<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	const back = () => {
		router.back()
	}
	// const back = ()=>{
	// 	router.push({
	// 		name: 'onlineResume'
	// 	})
	// }
	let personInfoData = reactive({
		info:{},
	})
	let editorCtx = ref()
	let placeholder = ref('开始输入...')
	const onEditorReady = () => {
		// #ifdef MP-BAIDU
		editorCtx.value= requireDynamicLib('editorLib').createEditorContext('editor')
		// #endif
		// #ifdef APP-PLUS || H5 ||MP-WEIXIN
		uni.createSelectorQuery().select('#editor').context((res) => {
			console.log(res,'res')
			editorCtx.value = res.context
		}).exec()
		// #endif
	}
	const inputCon = (val) => {
		personInfoData.info.info = val.detail.html
	}
	const showContent = ()=>{
		uni.createSelectorQuery().select('#editor').context((res)=> {
		    if(!res) return
			res.context.setContents({
			    html: personInfoData.info.info
			})							
		}).exec()
	}
	const insertImg = () => {
		//选择图片插入富文本
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: proxy.$uploadUrl + proxy.$api.uploadFile,
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'file': tempFilePaths[0],
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).result);
						//插入富文本图片
						personInfoData.info.personalAdvantages.insertImage({
							src: JSON.parse(uploadFileRes.data).result,
							alt: '图片',
							width: "750rpx",
							mode: 'widthFix',
							success: function (e) {
								console.log(e);
							}
						});
					}
				});
			}
		});
	}
	
	// 修改数据
	const editFun = ()=>{
		proxy.$req('POST', proxy.$api.meiyeRecruitHunterInfo2edit,personInfoData.info).then((res) => {
			if(res.code === 200){
				back()
			}
		})
	}
	// 获取个人简历详情
	const meiyeRecruitHunterInfo2DetailsFun = ()=>{
		//获取详情
		proxy.$req('GET', proxy.$api.meiyeRecruitHunterInfo2Details).then((res) => {
			if(res.code === 200){
				personInfoData.info = res.result
				showContent()
				
			}
		})
	}
	meiyeRecruitHunterInfo2DetailsFun()
</script>
<template>
	<view class="navSearch">
		<u-navbar :placeholder="true" leftText="" title="自我评价" auto-back>
			<template #left>
				<view class="" @click="back">
					<u-icon name="arrow-left" size="22"></u-icon>
				</view>
			</template>
			<template #right>
				<view class="subBtn" @click="editFun">
					保存
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="container">
		<editor id="editor" class="ql-container" :placeholder="placeholder" :show-img-size="true"
			:show-img-toolbar="true" :show-img-resize="true" @ready="onEditorReady" @input="inputCon">
		</editor>
	</view>
	<!-- <view class="imgInsert c-flex-center-start">
		<image class="" src="../../../static/icon/picture.png" mode="" @click="insertImg"></image>
	</view> -->
</template>
<style lang="scss" scoped>
	page {
		background-color: #fafafa;
	}

	.navSearch {
		width: 100%;
		border-bottom: 1rpx solid #D7D7D7;
	}

	.subBtn {
		width: 104rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: rgba(255, 255, 255, 0);
		border: 1rpx solid rgba(0, 0, 0, 0.25);
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		border-radius: 8rpx;
	}

	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 400px;
	}

	.imgInsert {
		width: 100%;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		left: 0rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 40rpx;
		border: 2rpx solid #FFFFFF;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 32rpx;
		}
	}
</style>